import '../skiff-drag-handle.css';

import cx from 'classnames';
import React from 'react';

class DragHandle extends React.PureComponent<any, any, any> {
  render() {
    const { onClick, className, theme } = this.props;
    const generatedClass = cx(className, 'skiff-drag-handle');

    return (
      <span className={`${generatedClass} ${theme}`} data-draggable data-test={`drag-${className}`} onClick={onClick}>
        <svg
          data-draggable
          data-svg-handle
          fill='none'
          height='18'
          viewBox='0 0 18 18'
          width='18'
          xmlns='http://www.w3.org/2000/svg'
        >
          <path
            d='M7.66667 3.8C7.66667 4.05712 7.58847 4.30846 7.44196 4.52224C7.29545 4.73603 7.08721 4.90265 6.84358 5.00104C6.59994 5.09944 6.33185 5.12518 6.07321 5.07502C5.81457 5.02486 5.57699 4.90105 5.39052 4.71924C5.20405 4.53743 5.07707 4.30579 5.02562 4.05362C4.97417 3.80144 5.00058 3.54006 5.10149 3.30251C5.20241 3.06497 5.37331 2.86194 5.59257 2.71909C5.81184 2.57624 6.06963 2.5 6.33333 2.5C6.68696 2.5 7.02609 2.63696 7.27614 2.88076C7.52619 3.12456 7.66667 3.45522 7.66667 3.8ZM6.33333 7.7C6.06963 7.7 5.81184 7.77624 5.59257 7.91909C5.37331 8.06193 5.20241 8.26497 5.10149 8.50251C5.00058 8.74006 4.97417 9.00144 5.02562 9.25362C5.07707 9.50579 5.20405 9.73743 5.39052 9.91924C5.57699 10.101 5.81457 10.2249 6.07321 10.275C6.33185 10.3252 6.59994 10.2994 6.84358 10.201C7.08721 10.1026 7.29545 9.93602 7.44196 9.72224C7.58847 9.50846 7.66667 9.25712 7.66667 9C7.66667 8.65522 7.52619 8.32456 7.27614 8.08076C7.02609 7.83696 6.68696 7.7 6.33333 7.7ZM6.33333 12.9C6.06963 12.9 5.81184 12.9762 5.59257 13.1191C5.37331 13.2619 5.20241 13.465 5.10149 13.7025C5.00058 13.9401 4.97417 14.2014 5.02562 14.4536C5.07707 14.7058 5.20405 14.9374 5.39052 15.1192C5.57699 15.301 5.81457 15.4249 6.07321 15.475C6.33185 15.5252 6.59994 15.4994 6.84358 15.401C7.08721 15.3026 7.29545 15.136 7.44196 14.9222C7.58847 14.7085 7.66667 14.4571 7.66667 14.2C7.66667 13.8552 7.52619 13.5246 7.27614 13.2808C7.02609 13.037 6.68696 12.9 6.33333 12.9ZM11.6667 5.1C11.9304 5.1 12.1882 5.02376 12.4074 4.88091C12.6267 4.73806 12.7976 4.53503 12.8985 4.29749C12.9994 4.05994 13.0258 3.79856 12.9744 3.54638C12.9229 3.29421 12.7959 3.06257 12.6095 2.88076C12.423 2.69895 12.1854 2.57514 11.9268 2.52498C11.6681 2.47482 11.4001 2.50056 11.1564 2.59896C10.9128 2.69735 10.7045 2.86398 10.558 3.07776C10.4115 3.29154 10.3333 3.54288 10.3333 3.8C10.3333 4.14478 10.4738 4.47544 10.7239 4.71924C10.9739 4.96304 11.313 5.1 11.6667 5.1ZM11.6667 10.3C11.9304 10.3 12.1882 10.2238 12.4074 10.0809C12.6267 9.93806 12.7976 9.73503 12.8985 9.49749C12.9994 9.25994 13.0258 8.99856 12.9744 8.74638C12.9229 8.49421 12.7959 8.26257 12.6095 8.08076C12.423 7.89895 12.1854 7.77514 11.9268 7.72498C11.6681 7.67482 11.4001 7.70056 11.1564 7.79896C10.9128 7.89735 10.7045 8.06397 10.558 8.27776C10.4115 8.49154 10.3333 8.74288 10.3333 9C10.3333 9.34478 10.4738 9.67544 10.7239 9.91924C10.9739 10.163 11.313 10.3 11.6667 10.3ZM11.6667 15.5C11.9304 15.5 12.1882 15.4238 12.4074 15.2809C12.6267 15.1381 12.7976 14.935 12.8985 14.6975C12.9994 14.4599 13.0258 14.1986 12.9744 13.9464C12.9229 13.6942 12.7959 13.4626 12.6095 13.2808C12.423 13.099 12.1854 12.9751 11.9268 12.925C11.6681 12.8748 11.4001 12.9006 11.1564 12.999C10.9128 13.0973 10.7045 13.264 10.558 13.4778C10.4115 13.6915 10.3333 13.9429 10.3333 14.2C10.3333 14.5448 10.4738 14.8754 10.7239 15.1192C10.9739 15.363 11.313 15.5 11.6667 15.5Z'
            data-draggable
            fill='var(--icon-secondary)'
          />
        </svg>
      </span>
    );
  }
}

export default DragHandle;
